<template>
  <div class="main-page" style="min-width:1366px;">
    <el-form ref="form">
      <!-- 搜索栏 -->
      <BaseSearchBar v-on:ChildSearchEvent="getSearchSectionList"></BaseSearchBar>
    </el-form>
    <!-- 表单 -->
    <el-card :body-style="{ padding: '0px' }" class="box-card">
      <!-- <div class="SearchT">
        <div class="tableLable">数据管理列表</div>
        <el-button type="danger" class="BatchDeleBtn" style="width:80px" size="small">批量删除</el-button>

        <el-button type="primary" class="exportBtn" style="width:80px" size="small">导出</el-button>
      </div>-->
      <div class="tableStyle">
        <el-table
          ref="multipleTable"
          class="card-table"
          :data="SectionList"
          tooltip-effect="dark"
          style="font-size:12px"
          :header-cell-style="{ background: '#3F9DFD', color: '#FFF' }"
          size="medium"
          height="634px"
          stripe
          border
        >
          <el-table-column label="序号" type="index" width="50"></el-table-column>

          <el-table-column prop="ksdm" label="医院科室编码" show-overflow-tooltip width="110" />
          <el-table-column prop="ksmc" label="医院科室名称" show-overflow-tooltip width="200" />
          <el-table-column label="是否门诊科室(可编辑)" show-overflow-tooltip width="160">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.mzks"
                @change="changemzks(scope.row.id, $event)"
                size="small"
              >
                <el-option
                  v-for="item in mzks"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <!-- {{(scope.row.mzks==1)?'是':(scope.row.mzks==0)?'否':"不能确定"}} -->
            </template>
          </el-table-column>
          <el-table-column label="是否住院科室(可编辑)" show-overflow-tooltip width="160">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.zyks"
                @change="changezyks(scope.row.id, $event)"
                size="small"
              >
                <el-option
                  v-for="item in zyks"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <!-- {{(scope.row.zyks==1)?'是':(scope.row.zyks==0)?'否':"不能确定"}} -->
            </template>
          </el-table-column>
          <el-table-column prop="jzks" label="是否急诊科室(可编辑)" show-overflow-tooltip width="160">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.jzks"
                @change="changejzks(scope.row.id, $event)"
                size="small"
              >
                <el-option
                  v-for="item in jzks"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <!-- {{(scope.row.jzks==1)?'是':(scope.row.jzks==0)?'否':"不能确定"}} -->
            </template>
          </el-table-column>
          <el-table-column prop="sfzy" label="是否在用(可编辑)" show-overflow-tooltip width="160">
            <template slot-scope="scope">
              <!-- {{scope.row.sfzy}} -->
              <el-select
                v-model="scope.row.sfzy"
                @change="changesfzy(scope.row.id, $event)"
                size="small"
              >
                <el-option
                  v-for="item in jzks"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="操作人员/时间" show-overflow-tooltip width="210">
            <template slot-scope="scope">{{scope.row.matchUser}}/{{getDate(scope.row.matchTime)}}</template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[20, 50, 100]"
            :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
          ></el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import BaseSearchBar from "./BaseSearchBar";
import {
  getSectionList,
  getdate,
  changemzks,
  changezyks,
  changejzks,
  changesfzy,
} from "@/api/rad";

export default {
  name: "MainPage",
  components: {
    BaseSearchBar,
  },
  data() {
    return {
      // 列表的参数对象
      queryInfo: {
        ksdm: "",
        // 当前的页数
        ksmc: "",
        page: 1,
        // 当前页显示多少数据
        pageSize: 20,
      },
      SectionList: [],
      total: 0,
      mzks: [
        {
          value: 1,
          label: "是",
        },
        {
          value: 0,
          label: "否",
        },
        {
          value: -1,
          label: "不确定",
        },
      ],
      zyks: [
        {
          value: 1,
          label: "是",
        },
        {
          value: 0,
          label: "否",
        },
        {
          value: -1,
          label: "不确定",
        },
      ],
      jzks: [
        {
          value: 1,
          label: "是",
        },
        {
          value: 0,
          label: "否",
        },
        {
          value: -1,
          label: "不确定",
        },
      ],
      sfzy: [
        {
          value: 1,
          label: "是",
        },
        {
          value: 0,
          label: "否",
        },
        {
          value: -1,
          label: "不确定",
        },
      ],
    };
  },
  created: function () {
    this.getSectionList();
  },
  methods: {
    // 监听pagesize改变的事件
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.queryInfo.pageSize = newSize;
      this.getSectionList();
    },
    // 当前展示的页面
    handleCurrentChange(newPage) {
      // console.log(newPage)
      this.queryInfo.page = newPage;
      this.getSectionList();
    },
    // api
    async getSectionList() {
      let _this = this;
      let res = await this.$rad.getSectionList({
        ksdm: _this.queryInfo.ksdm,
        ksmc: _this.queryInfo.ksmc,
        page: _this.queryInfo.page,
        pageSize: _this.queryInfo.pageSize,
      });
      this.SectionList = res.rows;
      console.log(res);
      this.total = res.total;
    },
    // 获取搜索列表
    getSearchSectionList(data) {
      this.queryInfo.ksdm = data.ksdm;
      this.queryInfo.ksmc = data.ksmc;
      console.log(data);
      this.getSectionList();
    },
    //时间戳转时间
    getDate(data) {
      return this.$rad.getdate(data);
    },
    async changemzks(id, e) {
      console.log(id);
      console.log(e);
      var res = await this.$rad.changemzks({
        id: id,
        mzks: e,
      });
      console.log(res);
      if (res.code == 1) {
        this.getSectionList();
        return this.$message({
          type: "success",
          message: res.msg,
        });
      } else {
        this.getSectionList();
        return this.$message({
          type: "error",
          message: res.msg,
        });
      }
    },
    async changezyks(id, e) {
      console.log(id);
      console.log(e);
      var res = await this.$rad.changezyks({
        id: id,
        zyks: e,
      });
      console.log(res.result);
      if (res.code == 1) {
        this.getSectionList();
        return this.$message({
          type: "success",
          message: res.msg,
        });
      } else {
        this.getSectionList();
        return this.$message({
          type: "error",
          message: res.msg,
        });
      }
    },
    async changejzks(id, e) {
      console.log(id);
      console.log(e);
      var res = await this.$rad.changejzks({
        id: id,
        jzks: e,
      });
      console.log(res.code);
      if (res.code == 1) {
        this.getSectionList();
        return this.$message({
          type: "success",
          message: res.msg,
        });
      } else {
        this.getSectionList();
        return this.$message({
          type: "error",
          message: res.msg,
        });
      }
    },
    async changesfzy(id, e) {
      console.log(id);
      console.log(e);
      var res = await this.$rad.changesfzy({
        id: id,
        sfzy: e,
      });
      console.log(res.result);
      if (res.code == 1) {
        this.getSectionList();
        return this.$message({
          type: "success",
          message: res.msg,
        });
      } else {
        this.getSectionList();
        return this.$message({
          type: "error",
          message: res.msg,
        });
      }
    },
  },
};
</script>
<style scoped>
.el-card {
  margin-left: 3px;
}
.SearchT {
  display: flex;
  justify-content: flex-end;
  height: 50px;
  align-items: center;
  background-color: #e6edf3;
  font-size: 14px;
}
.tableLable {
  flex: 1;
  text-align: left;
  margin-left: 15px;
  letter-spacing: 2px;
  font-size: 14px;
  color: #32a6f3;
  font-weight: bold;
}
.exportBtn {
  margin-right: 23px;
}
.BatchDeleBtn {
  margin-right: 15px;
}
.tableStyle {
  width: 100%;
  height: 100%;
}
.card-table {
  width: 100%;
  height: 75%;
}
.block {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 12px;
}
</style>
